<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>前台</title>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../styles/common.css" />

    <style>

    </style>
</head>

<body>

<div id="app">


    <el-container style="height: 750px; border: 1px solid #eee">


<!--1.侧边栏-->
        <el-aside width="250px"  style="background-color: #545c64">

            <div class="demo-image__placeholder">
                <div class="block" style="margin-top: 30px;margin-bottom: 30px">
                    <el-image style="width: 60%;height: 60%;margin-left: 45px;border-radius: 40%" src="../../images/login/logo7.png"></el-image>

                </div>
            </div>

            <el-menu :default-openeds="[ '1','2', '3', '4']" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
                <el-submenu  index="1">
                    <template slot="title"><i class="el-icon-user"></i>个人信息</template>
                    <el-menu-item-group>
                        <template slot="title">信息</template>
                        <el-menu-item index="1-0" @click="clickUrl(0)">个人信息</el-menu-item>
                        <el-menu-item index="1-1" @click="clickUrl(1)">修改个人信息</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>

                <el-submenu  index="2">
                    <template slot="title"><i class="el-icon-food"></i>餐桌</template>
                    <el-menu-item-group>
                        <template slot="title">分组一</template>
                        <el-menu-item index="2-1" @click="clickUrl(3)">餐桌预定</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>

                <el-submenu  index="3">
                    <template slot="title"><i class="el-icon-food"></i>菜系</template>
                    <el-menu-item-group>
                        <template slot="title">分组一</template>
                        <el-menu-item index="3-1" @click="clickUrl(5)">点餐</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu  index="4">
                    <template slot="title"><i class="el-icon-food"></i>订单管理</template>
                    <el-menu-item-group>
                        <template slot="title">分组一</template>
                        <el-menu-item index="4-1" @click="clickUrl(6)">订单表</el-menu-item>
                        <el-menu-item index="4-2" @click="clickUrl(7)">订单明细表</el-menu-item>
                        <el-menu-item index="5-3" @click="clickUrl(8)">餐桌预定订单表</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>

            </el-menu>
        </el-aside>

        <el-container >
        <!--2.上边栏-->
            <el-header style=" text-align: right; font-size: 12px">


                <h1 style="margin: 20px 100px 0 0;">欢迎，{{prosceniumInfo.data.name}}</h1>

                <el-dropdown>
                    <i class="el-icon-user-solid" style="font-size: 35px;margin: -40px 0 0px -70px;position: absolute;"></i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item><span @click="clickUrl(1)">修改个人信息</span></el-dropdown-item>
                        <el-dropdown-item><span @click="loginOut()">退出登录</span></el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-header>


            <div style="width: 100%;height:10px;background-color:whitesmoke;"></div>
            <div style="width: 100%;height:50px;background-color: #c8c8ca;">
                <h1 style=" float: left;margin: 10px 0 0 20px;font-size: 20px">
                    {{infoName}}
                </h1>

                <p style=" float: left;margin: 10px 0 0 800px;font-size: 20px">
                    {{navigate}}<span style="color:red;">{{title}}</span>
                </p>
            </div>



        <!--3.主内容(iframe)-->
            <el-main style="background-color: #f1f2f7">
                <div style="border:3px solid #d8d8d8;border-bottom:hidden;width: 100%;height:50px;background-color: #f7f7f7;">
                    <p  style=" float: left;margin: 10px 0 0 10px;font-size: 20px">{{title}}</p>
                </div>

                <div style=";border:3px solid #d8d8d8;width: 100%;height:120%;background-color: white;">
                    <iframe
                            :src="iframeUrl"
                            frameborder="0"
                            name="iframe0"
                            width="100%"
                            height="100%"
                    ></iframe>
                </div>
            </el-main>


        </el-container>
    </el-container>
</div>


<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../plugins/vue/vue.js"></script>

<!-- 引入组件库 -->
<script src="../../plugins/element-ui/index.js"></script>

<!-- 引入axios -->
<script src="../../plugins/axios/axios.min.js"></script>


<script>
    new Vue({
        el: "#app",
        data: {
            prosceniumInfo:{},   //用户信息
            // infoName:'欢迎界面  ',   //标题
            // navigate:'',
            // title:'',
            // iframeUrl:'childPages/welcome.html',

            infoName:'个人信息  ',   //标题
            navigate:'个人信息/',
            title:'个人信息',
            iframeUrl:'childPages/welcome.html',
        },
        created() {
            const prosceniumInfo = window.localStorage.getItem('prosceniumInfo')
            console.log("prosceniumInfo:::"+prosceniumInfo)
            if (prosceniumInfo) {
                this.prosceniumInfo = JSON.parse(prosceniumInfo)
            }
            console.log("prosceniumInfo:::"+prosceniumInfo)
        },
        mounted() {
            window.clickUrl = this.clickUrl
        },
        methods: {
           handleClick(tab, event) {
                console.log(tab, event);
            },

            loginOut(){
                window.location.href='../login/login_admin.html';
            },

           clickUrl(index){
               if (index=="0"){
                   this.infoName='个人信息'
                   this.title='个人信息'
                   this.navigate='个人信息/'
                   this.iframeUrl='childPages/welcome.html'
               }else if (index=="1"){
                   this.infoName='个人信息'
                   this.title='修改个人信息'
                   this.navigate='个人信息/'
                   this.iframeUrl='childPages/prosceniumUpdate.html'
               }else if (index=="3"){
                   this.infoName='餐桌'
                   this.navigate='餐桌/'
                   this.title='餐桌预定'
                   this.iframeUrl='childPages/scheduleTableList.html'
               }else if (index=="4"){
                   this.infoName='食材库'
                   this.navigate='食材库/'
                   this.title='新增食材'
                   this.iframeUrl='childPages/cuisineList.html'
               }else if (index=="5"){
                   this.infoName='菜系'
                   this.navigate='菜系/'
                   this.title='点餐'
                   this.iframeUrl='childPages/cuisineList.html'
               }else if (index=="6"){
                   this.infoName='订单管理'
                   this.navigate='订单管理/'
                   this.title='订单表'
                   this.iframeUrl='childPages/ordersList.html'
               }else if (index=="7"){
                   this.infoName='订单管理'
                   this.navigate='订单管理/'
                   this.title='订单明细表'
                   this.iframeUrl='childPages/orderDetailList.html'
               }else if (index=="8"){
                   this.infoName='订单管理'
                   this.navigate='订单管理/'
                   this.title='餐桌预定订单表'
                   this.iframeUrl='childPages/scheduleTableOrdersList.html'
               }
            },

        }
    })
</script>
</body>

</html>



